<template>
  <view v-if="shenheStatus == 0" class="page-container">
    <!-- 头部信息 -->
    <view class="page-head">
      <view class="tab-section">
        <view
          class="left-tab"
          :class="mealType == 'shop' ? 'activeTab' : ''"
          @click="changeMealType('shop')"
        >
          <text>{{ $t("alipay.shop") }}</text>
          <view class="left-triangle" v-if="mealType == 'shop'">
            <image :src="asyncImgs.alipay.left_tab_icon" mode="" />
          </view>
        </view>
        <view
          class="right-tab"
          :class="mealType == 'delivery' ? 'activeTab' : ''"
          @click="changeMealType('delivery')"
        >
          <text>{{ $t("alipay.delivery") }}</text>
          <view class="right-triangle" v-if="mealType == 'delivery'">
            <image :src="asyncImgs.alipay.right_tab_icon" mode="" />
          </view>
        </view>
      </view>
      <view class="user-address">
        <view
          class="address-info"
          @click="guideToShop"
          v-if="mealType == 'shop' && userAddress"
        >
          <view class="address">{{ md_info.detail_address }}</view>
          <view class="distance-box">
            <text>{{ $t("diy.distance") }}{{ md_info.distance }}></text>
            <view class="down-icon"></view>
          </view>
        </view>
        <view
          class="no-address"
          @click="toAddress"
          v-if="mealType == 'delivery' && !userAddress.id"
        >
          <view class="notice-words">
            <view class="title">{{ $t("common.noAddress") }}</view>
            <view class="subtitle">{{ $t("common.chooseAddress") }}</view>
          </view>
          <u-icon size="22" color="#CDCDCD" name="arrow-right"></u-icon>
        </view>
        <view
          @click="toAddress"
          class="user-express-info"
          v-if="mealType == 'delivery' && userAddress.id"
        >
          <view class="address">{{ userAddress.detail }}</view>
          <view class="name-mobile">
            {{ userAddress.name }} {{ userAddress.mobile | noPassByMobile }}
          </view>
        </view>
      </view>
      <view class="user-time" @click="showTimePopup" v-if="mealType == 'shop'">
        <view class="label">{{ $t("alipay.time") }}</view>
        <view class="label-time-info">
          <text>{{ userForm.time || $t("alipay.chooseTime") }}</text>
          <u-icon size="22" color="#CDCDCD" name="arrow-right"></u-icon>
        </view>
      </view>
      <view class="user-mobile" v-if="mealType == 'shop'">
        <view class="label">{{ $t("alipay.phone") }}</view>
        <view class="label-item-info">
          <input
            maxlength="11"
            :placeholder="$t('alipay.noPhone')"
            v-model="userForm.mobile"
            placeholder-style="color: #f0250e"
            type="number"
          />
          <i class="iconfont icon-bianji"></i>
        </view>
      </view>
      <image
        class="distribution-bottom"
        :src="asyncImgs.shopingcart.heng"
        mode="scaleToFill"
      ></image>
      <view class="header-bg-img">
        <image
          src="https://chidian.chixiaodian.com/web/uploads/images/store_1/2021-12-21/597301f111fa50ee4eddb0572a241eab0408bb3b.png"
          mode=""
        />
      </view>
    </view>
    <view class="page-body">
      <!-- 订单商品列表 -->
      <view class="order-goods">
        <view class="order-goods-header"></view>
        <view class="order-goods-body">
          <view class="md-info">
            <i class="iconfont icon-store"></i>
            <text>{{ md_info.name || stores.name }}</text>
          </view>
          <!-- <goodsList
            v-if="food_table_num"
            :goods_list="order_goods_list"
          ></goodsList> -->
          <userGoodsList
            v-if="goods_list && goods_list.length"
            :mealType="mealType"
            :goods_list="goods_list"
          ></userGoodsList>
        </view>
        <view class="order-goods-foot">
          <view class="label">{{ $t("facePay.remark") }}</view>
          <view class="label-content">
            <input
              type="text"
              :placeholder="$t('order.beforeMessage')"
              v-model="remark"
            />
          </view>
        </view>
      </view>
      <!-- 订单详情 -->
      <view class="order-summary">
        <view class="order-goods-price">
          <view class="label">{{ $t("submit.price") }}</view>
          <view class="label-content">¥{{ orderTotalPrice1 }}</view>
        </view>

        <view
          class="order-goods-price"
          @click="handleIntegral"
          v-if="!is_integral"
        >
          <view class="label">{{ $t("clerk.integral") }}</view>
          <view class="label-content">
            <view
              >- ￥{{ all_integral_price }}
              <u-icon size="22" color="#CDCDCD" name="arrow-right"></u-icon>
            </view>
          </view>
        </view>
        <view class="order-fright">
          <view class="label">随机立减</view>
          <view class="label-content">¥{{ rand_discount_price }}</view>
        </view>
        <template v-if="mealType == 'delivery'">
          <view class="order-fright">
            <view class="label">运费</view>
            <view class="label-content">¥{{ delivery_price }}</view>
          </view>
          <view class="order-goods-price" @click="showTimePopup">
            <view class="label">配送时间</view>
            <view class="label-content">
              <view>
                {{ delivery_time ? delivery_time : "立即配送" }}
                <u-icon size="22" color="#CDCDCD" name="arrow-right"></u-icon>
              </view>
            </view>
          </view>
        </template>

        <!-- 是否使用积分抵扣弹框 -->
        <integralUsePopup
          ref="integralUsePopup"
          :price="integralPrice"
          :useIntegral="useIntegral"
          @confirm="isUseIntegral"
          v-if="!is_integral"
        ></integralUsePopup>
      </view>
      <!-- 支付方式 -->
      <view class="order-pay" @click="handlePay">
        <view class="label">{{ $t("order.methods") }}</view>
        <view class="label-content">
          <!-- // food_pay_type： 0: 线上支付  1：线下支付 -->
          <text>{{
            payment
              ? paymentWord
              : food_pay.food_pay_type == 1
              ? $t("alipay.outLine")
              : $t("alipay.onLine")
          }}</text>
          <u-icon size="22" color="#CDCDCD" name="arrow-right"></u-icon>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <view class="page-foot">
      <view class="foot-content">
        <view class="foot-price">
          <text>¥</text>
          <text>{{ orderTotalPrice | priceBeforeZero }}</text>
          <text>{{ orderTotalPrice | priceAfterZero }}</text>
        </view>
        <view class="foot-btns">
          <view class="add-btn" @click="toAddGoods" v-if="storeTableNum">{{
            $t("alipay.con")
          }}</view>
          <view class="submit-btn" @click="submit">{{
            $t("submit.submit")
          }}</view>
        </view>
      </view>
      <view class="safe"></view>
    </view>

    <!-- 预约时间弹框 -->
    <timePopup
      ref="timePopup"
      @selectEnd="selectEnd"
      :mealType="mealType"
      :day="day"
    ></timePopup>
    <!-- 支付类型选择弹框 -->
    <payWayPopup
      :showPopup="showPayWayPopup"
      :payWayList="payWayList"
      :current="payType"
      @payTypeSelect="payTypeSelect"
      @closePopup="showPayWayPopup = false"
    ></payWayPopup>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
// 支付方式：1:微信支付,2:货到付款,3:余额支付,4:支付宝,5:抖音支付,6:线下支付,7:朋友代付
import timePopup from "../components/order/timePopup.vue";
import payWayPopup from "../components/order/payWayPopup.vue";
import goodsList from "../components/order/goodsList.vue";
import userGoodsList from "../components/order/userGoodsList.vue";
import { orderMealMixin } from "../mixins/index";
import integralUsePopup from "../components/order/integralUsePopup.vue";
export default {
  components: {
    timePopup,
    payWayPopup,
    goodsList,
    userGoodsList,
    integralUsePopup,

    Shenhe
  },
  data() {
    return {
      uNoticeBar: [],
      mealType: "shop", // shop:店内  delivery: 外卖
      orderInfo: {},
      orderList: [],
      routeData: {},
      order_id: "",
      showFooterPay: true, // 展示底部支付结算按钮
      address: {
        name: "",
        mobile: ""
      }, // 收货地址
      send_type_arr: [],
      isShop: false, //是否选有有门店自提商品
      userForm: {
        time: this.$t("alipay.get"),
        mobile: ""
      },
      userAddress: {},
      remark: "",
      orderInfo: {},
      goods_list: [],
      food_pay: {},
      showPayWayPopup: false,
      payType: "",
      longitude: "",
      latitude: "",
      md_info: {},
      payWayList: [],
      mch_list: [],
      payment: "",
      payTrans: {
        alipay: "4",
        wechat: "1",
        huodao: "2",
        friend: "7",
        bytedance: "5"
      },
      food_table_num: uni.getStorageSync("food_table_num") || "",
      useIntegral: true,
      all_integral_price_init: "0",
      all_integral_price: "0",
      order_info: null,
      delivery_price: 0,
      day: "2",
      delivery_time: "",
      rand_discount_price: "0.00"
    };
  },
  mixins: [orderMealMixin], //混入文件,
  computed: {
    // 判断是否为积分订单
    is_integral() {
      if (this.mch_list && this.mch_list.length) {
        if (
          this.mch_list[0].name == `${this.stores.integral_name}商品` &&
          this.mch_list[0].goods_list[0].product_type == 4
        ) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    order_goods_list() {
      let arr = [];
      // let food_table_num = uni.getStorageSync('food_table_num');
      if (this.mealType == "shop") {
        this.goods_list.forEach((d) => {
          // if (food_table_num) {
          //   if (d.delivery_type.includes("shop")) {
          //     arr.push(d);
          //   }
          // } else {
          if (d?.goods_list) {
            d.goods_list.forEach((k) => {
              if (k.delivery_type.includes("shop")) {
                arr.push(k);
              }
            });
          }
          // }
        });
      }

      if (this.mealType == "delivery") {
        this.goods_list.forEach((d) => {
          // if (food_table_num) {
          //   if (d.delivery_type.includes("delivery")) {
          //     arr.push(d);
          //   }
          // } else {
          if (d?.goods_list) {
            d.goods_list.forEach((k) => {
              if (k.delivery_type.includes("delivery")) {
                arr.push(k);
              }
            });
          }
          // }
        });
      }
      return arr;
    },
    orderTotalPrice1() {
      let total = 0;

      if (this.goods_list && this.goods_list.length) {
        this.goods_list.forEach((d) => {
          if (d && d.goods_list && d.goods_list.length) {
            d.goods_list.forEach((e) => {
              total = total + e.price * 1;
            });
          }
        });

        total = total.toFixed(2);
      }

      return total;
    },
    orderTotalPrice() {
      let total = 0;
      total =
        this.orderTotalPrice1 -
        this.all_integral_price -
        parseFloat(this.rand_discount_price);

      if (this.mealType === "delivery") {
        total += parseFloat(this.delivery_price);
      }

      return total;
    },
    paymentWord() {
      if (!this.food_pay.food_payment) return "";
      let [str] = this.food_pay.food_payment.filter((d) => {
        return d.payment == this.payment;
      });
      if (str) return str.name || "";
      return "";
    }
  },
  filters: {
    priceBeforeZero(val) {
      if (!val) val = "";
      val = val.toString();
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (!val) val = "";
      val = val.toString();
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
    noPassByMobile(str) {
      if (null != str && str != undefined) {
        var pat = /(\d{3})\d*(\d{4})/;
        return str.replace(pat, "$1****$2");
      } else {
        return "";
      }
    }
  },
  onLoad(t) {
    if (t.mealType) {
      this.mealType = t.mealType;
    }

    if (t?.order_info) {
      let params = JSON.parse(t.order_info);
      this.order_info = params;
      this.initData(params);
    }
  },
  onShow() {
    let address = uni.getStorageSync("SELECT_ORDER_ADDRESS");
    if (address) {
      address = JSON.parse(address);
      this.userAddress = address;
      setTimeout(() => {
        uni.removeStorageSync("SELECT_ORDER_ADDRESS");
      }, 0);
    }
  },
  methods: {
    async preSubmitOrder() {
      let { userAddress, order_info } = this,
        { mch_list } = order_info;
      const res = await this.$allrequest.order.preSubmitOrder(
        {
          address_id: userAddress ? userAddress.id : "",
          mch_list
        },
        true
      );

      if (!res.code) {
        this.delivery_price = res.data.fee.toFixed(2) || "0.00";
        this.day = parseInt(res.data.LocalDeliveryFreight.day);
      }
    },

    changeMealType(mealType) {
      this.mealType = mealType;
      this.getOrderPreview(this.order_info, 1);
    },

    async initData(params) {
      const res = await this.$store.dispatch("getLocation");
      if (res) {
        let { longitude, latitude } = res;
        this.longitude = longitude;
        this.latitude = latitude;
      }
      this.getOrderPreview(params);
    },
    setPayPrice(e) {
      if (this.useIntegral) {
        this.all_integral_price = this.all_integral_price_init;
      } else {
        this.all_integral_price = 0;
      }
    },
    // 获取订单预览数据
    getOrderPreview(params, type = 0) {
      let mdData = uni.getStorageSync("storeMdData");
      if (mdData) {
        mdData = JSON.parse(mdData);

        // #ifdef MP-TOUTIAO
        if (!mdData.id) mdData.id = -1;
        if (!params.table_num) params.table_num = "T1";
        // #endif
      } else {
        mdData = {
          id: -1
        };
      }
      params = {
        latitude: this.latitude,
        longitude: this.longitude,
        ...params,
        md_id: mdData.id || -1
      };

      this.$allrequest.alipay.orerMealOrderPreview(params).then((res) => {
        if (!res.code) {
          if (res.data.address && res.data.address.mobile) {
            this.userForm.mobile = res.data.address.mobile;
          }
          this.goods_list = res.data.mch_list[0].goods_list;
          // this.goods_list = res.data.mch_list[0].goods_list;
          this.food_pay = res.data.food_pay;
          try {
            if (this.food_pay && !type) {
              this.mealType = this.food_pay.default_food_delivery
                ? "delivery"
                : "shop";
            }
          } catch (error) {}
          this.md_info = res.data.md_info;
          this.userAddress = res.data.address || {};
          this.mch_list = res.data.mch_list;
          this.all_integral_price_init = res.data.integral.forehead;
          this.all_integral_price = res.data.integral.forehead;
          if (this.food_pay.food_pay_type == 1) {
            this.payment = "6";
          }
          if (res.data.flag_id) {
            uni.setStorageSync("flag_id", res.data.flag_id);
          }

          this.payWayList = res.data.pay_type_list;

          if (this.payWayList.length) {
            this.payment = this.payWayList[0].payment;
          }
          this.rand_discount_price =
            res.data.mch_list[0].rand_discount_price || "0.00";

          if (this.mealType == "delivery") this.preSubmitOrder();
        } else {
          uni.showToast({
            title: res.msg,
            duration: 2000
          });
          setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      });
    },
    showTimePopup() {
      this.$refs.timePopup.showPopup();
    },
    toAddress() {
      uni.navigateTo({
        url: "/user/my/addressmanage?is_order=1"
      });
    },
    selectEnd(e) {
      this.$refs.timePopup.closePopup();
      if (this.mealType == "shop") {
        this.userForm.time = `${e.time}`;
      } else {
        if (e.time === "立即自取") {
          this.delivery_time = `立即自取`;
        } else {
          this.delivery_time = `${e.date} ${e.time}`;
        }
      }
    },
    handlePay() {
      if (this.food_pay.food_pay_type == 1) return;
      this.showPayWayPopup = !this.showPayWayPopup;
    },
    // 请求订单详情
    getOrderDetail(params) {
      this.$allrequest.alipay.requestOrderDetail(params).then((res) => {
        if (!res.code) {
          this.orderInfo = res.data;
          this.orderList = res.data.list;
          this.uNoticeBar.push(res.data.tips);
        }
      });
    },
    // 点击外卖选项
    handleExpress() {
      // this.mealType = "delivery";
      uni.showToast({
        title: this.$t("alipay.noDistribution"),
        duration: 2000
      });
    },
    // 选择支付方式回调
    payTypeSelect(e) {
      this.payType = e.type;
      this.payment = e.type;
      this.showPayWayPopup = false;
    },
    // 点击展示使用积分弹框
    handleIntegral() {
      this.$refs.integralUsePopup.showPopup();
    },
    isUseIntegral(e) {
      this.useIntegral = e.status;
      this.setPayPrice();
      this.$refs.integralUsePopup.hidePopup();
    },
    // 去加菜
    toAddGoods() {
      // this.$utils.toUrl(`/alipay-order/orderMeal/orderMeal`, 'reLaunch');
      uni.navigateBack();
    },
    // 提交订单
    submit() {
      if (!this.goods_list.length) {
        uni.showToast({
          title: this.$t("alipay.noGoods"),
          duration: 2000,
          icon: "none"
        });
        return;
      }
      if (!this.payment) {
        this.showPayWayPopup = true;
        return;
      }
      if (!this.userForm.time && this.mealType == "shop") {
        uni.showToast({
          title: this.$t("alipay.noTime"),
          duration: 2000,
          icon: "none"
        });
        return;
      }
      if (!this.userForm.mobile && this.mealType == "shop") {
        uni.showToast({
          title: this.$t("alipay.noPhone"),
          duration: 2000,
          icon: "none"
        });
        return;
      }
      if (this.mealType == "delivery" && !this.userAddress?.id) {
        uni.showToast({
          title: this.$t("alipay.noAddress"),
          duration: 2000,
          icon: "none"
        });
        return;
      }
      let storageFlagId = uni.getStorageSync("flag_id");
      let params = {
        flag_id: storageFlagId
      };
      let mdData = uni.getStorageSync("storeMdData");
      if (!mdData) {
        params["md_id"] = -1;
      }
      if (storageFlagId) {
        this.$allrequest.alipay.spellOrderStatus(params).then((res) => {
          if (!res.code) {
            if (res.data.status == 1) {
              uni.removeStorageSync("flag_id");
              uni.removeStorageSync("food_table_num");
              uni.showToast({
                title: this.$t("alipay.end"),
                duration: 2000,
                icon: "none"
              });
              return;
            } else {
              this.requestSubmitOrder();
            }
          }
        });
      }
    },
    // api提交订单
    requestSubmitOrder() {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      let mchData = this.mch_list[0];
      if (mchData) {
        mchData = Object.assign({}, this.mch_list[0]);
        mchData.remark = this.remark;
        mchData.send = this.mealType;
        mchData.food_book_ext = JSON.stringify(this.userForm);
        // 是否开启积分扣除
        if (this.useIntegral) {
          mchData.use_integral = 1;
        } else {
          mchData.use_integral = 0;
        }
      }
      let [userData] = mchData.goods_list.filter((d) => {
        return d.user_id;
      });
      if (userData) {
        let arr = [];
        mchData.goods_list.forEach((d) => {
          if (d?.goods_list) {
            arr = [...arr, ...d.goods_list];
          }
        });
        if (arr.length) mchData.goods_list = arr;
      }

      mchData.delivery_time = this.delivery_time;
      let params = {
        mch_list: JSON.stringify([mchData]),
        payment: this.payment,
        flag_id: uni.getStorageSync("flag_id"),
        table_num: uni.getStorageSync("food_table_num")
      };
      if (this.mealType == "delivery") {
        params["address_id"] = this.userAddress.id;
      }
      let mdData = uni.getStorageSync("storeMdData");
      if (!mdData) {
        params["md_id"] = -1;
      }
      this.$allrequest.alipay.submitSpellOrder(params).then((res) => {
        uni.hideLoading();
        if (!res.code) {
          uni.showToast({
            title: this.$t("mdAdmin.submitSuc"),
            duration: 2000,
            icon: "none"
          });
          uni.removeStorageSync("flag_id");
          uni.removeStorageSync("food_table_num");
          // 如果是货到付款订单跳转订单列表
          if (params.payment == 2 || params.payment == 6) {
            return this.$utils.toUrl(`/order/order/order`, "reLaunch");
          }
          // 如果是好友代付则跳转至好友代付详情页
          if (params.payment == 7) {
            this.$utils.toUrl(
              `/order/pay-another/pay-another?orderId=${res.data.order_id}${
                !mdData ? "&md_id=-1" : ""
              }`,
              "redirectTo"
            );
            return;
          }
          let orderParams = {
            payData: {
              order_id: res.data.order_id,
              order_id_list: res.data.order_id_list || "",
              pay_type: params.payment
            },
            backUrl: "/order/order/order",
            pay_type_list: this.payWayList || [],
            pay_price: this.orderTotalPrice,
            createDate: res.data.add_time
          };
          this.$utils.toUrl(
            `/other/pay/pay?data=${JSON.stringify(orderParams)}`,
            "redirectTo"
          );
        }
      });
    },
    // 导航到店
    guideToShop() {
      uni.openLocation({
        latitude: parseFloat(this.md_info.latitude),
        longitude: parseFloat(this.md_info.longitude)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.page-container {
  width: 100%;
  min-height: 100vh;
  background: #f2f2f2;
  padding-top: 30rpx;
  padding-bottom: calc(env(safe-area-inset-bottom) + 144rpx);

  .page-head {
    width: 100%;
    position: relative;
    background: #ffffff;
    .tab-section {
      width: 100%;
      height: 68rpx;
      display: flex;
      justify-items: center;
      align-items: flex-end;
      position: relative;
      z-index: 2;
      .left-tab {
        width: 50%;
        height: 68rpx;
        background-color: #f2f2f2;
        opacity: 0.5;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 68rpx;
        text-align: center;
        color: #8c8c8c;
        border-radius: 16rpx 0 0 0;
        position: relative;
        z-index: 10;
        .left-triangle {
          width: 6vw;
          height: 74rpx;
          position: absolute;
          right: -6vw;
          top: 0;
          z-index: 21;
          image {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
          }
        }
      }
      .right-tab {
        width: 50%;
        height: 68rpx;
        background-color: #f2f2f2;
        opacity: 0.5;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        line-height: 68rpx;
        text-align: center;
        color: #8c8c8c;
        border-radius: 0 16rpx 0 0;
        position: relative;
        z-index: 10;
        .right-triangle {
          width: 6vw;
          height: 74rpx;
          position: absolute;
          left: -6vw;
          top: 0;
          z-index: 21;
          image {
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
          }
        }
      }
      .activeTab {
        height: 74rpx;
        background: #ffffff;
        opacity: 1;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #191919;
        z-index: 11;
      }
    }
    .user-address {
      width: 100%;
      position: relative;
      z-index: 2;
      .address-info {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 36rpx 24rpx 15rpx 24rpx;
        .address {
          font-size: 36rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
          max-width: 480rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }
        .distance-box {
          // width: 140rpx;
          height: 48rpx;
          background: #ffffff;
          box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.07);
          border-radius: 24rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          padding: 0 12rpx;
          text {
            font-size: 20rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: #262626;
          }
          .down-icon {
            width: 0;
            height: 0;
            border-left: 12rpx solid transparent;
            border-right: 12rpx solid transparent;
            border-top: 24rpx solid #ffffff;
            position: absolute;
            left: 43%;
            bottom: -15rpx;
          }
        }
      }
      .no-address {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 36rpx 24rpx 15rpx 24rpx;
        .notice-words {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .title {
            font-size: 26rpx;
            color: #262626;
          }
          .subtitle {
            margin-top: 20rpx;
            font-size: 34rpx;
            font-weight: 600;
          }
        }
      }
      .user-express-info {
        width: 100%;
        padding: 36rpx 24rpx 30rpx 24rpx;
        .address {
          font-size: 36rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .name-mobile {
          display: flex;
          align-items: center;
          margin-top: 8rpx;
          text {
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #262626;
          }
        }
      }
    }
    .user-time {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15rpx 24rpx;
      position: relative;
      z-index: 2;
      .label {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .label-time-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        text {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #f0250e;
          display: inline-block;
          margin-right: 16rpx;
        }
      }
    }
    .user-mobile {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15rpx 24rpx;
      position: relative;
      z-index: 2;
      .label {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #262626;
      }
      .label-item-info {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        input {
          width: 70%;
          text-align: right;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #f0250e;
        }
        .iconfont {
          color: #cdcdcd;
          font-size: 38rpx;
          position: relative;
          left: 6rpx;
        }
      }
    }
    .distribution-bottom {
      width: 100%;
      height: 6rpx;
      display: block;
      margin-top: 15rpx;
      position: relative;
      z-index: 2;
    }
    .header-bg-img {
      width: 100%;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 0;
      image {
        display: block;
        position: absolute;
        right: 0;
        top: 92rpx;
        width: 340rpx;
        height: 160rpx;
      }
    }
  }
  .page-body {
    width: 100%;
    .order-goods {
      width: 100%;
      background-color: #ffffff;
      margin-top: 24rpx;
      padding-left: 24rpx;
      .order-goods-body {
        width: 100%;
        .md-info {
          width: 100%;
          display: flex;
          align-items: center;
          padding-top: 24rpx;
          .iconfont {
            color: #2e2d2d;
          }
          text {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: #262626;
            display: inline-block;
            margin-left: 8rpx;
          }
        }
      }
      .order-goods-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 54rpx 30rpx 0;
        .label {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        .label-content {
          flex: 1;
          input {
            text-align: right;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 400;
          }
        }
      }
    }
    .order-summary {
      width: 100%;
      padding-left: 24rpx;
      background-color: #ffffff;
      margin-top: 24rpx;
      padding-top: 15rpx;
      .order-goods-price,
      .order-fright {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15rpx 15rpx 15rpx 0;
        .label {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        .label-content {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
      }
      .order-fright {
        padding-bottom: 30rpx;
      }
      .order-total {
        border-top: 1px solid #f2f2f2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 24rpx 60rpx 24rpx 0;
        text {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
        text:nth-child(2) {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #f0250e;
        }
      }
    }
    .order-pay {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 96rpx;
      background: #ffffff;
      padding: 0 24rpx;
      margin-top: 24rpx;
      .label {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #262626;
      }
      .label-content {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        text {
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #262626;
        }
      }
    }
  }
  .page-foot {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 111;
    background-color: #fff;
    .foot-content {
      width: 100%;
      height: 100rpx;
      background: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 24rpx;
      .foot-price {
        display: flex;
        align-items: baseline;
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 600;
        color: #f0250e;
        text:nth-child(2) {
          font-size: 60rpx;
        }
      }
      .foot-btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .add-btn,
        .submit-btn {
          width: 200rpx;
          height: 76rpx;
          background: #ffffff;
          border: 1px solid #999999;
          border-radius: 38rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 600;
          color: #262626;
        }
        .submit-btn {
          background: #f0250e;
          border: 0 none;
          color: #ffffff;
          margin-left: 24rpx;
        }
      }
      .safe {
        padding-bottom: env(safe-area-inset-bottom);
      }
    }
  }
}
</style>
